import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { VantResolver } from '@vant/auto-import-resolver';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import { resolve } from 'path';
import autoprefixer from 'autoprefixer';
// import postcssPxToViewport from 'postcss-px-to-viewport';
import UnoCSS from 'unocss/vite';
import viewport from 'postcss-mobile-forever';

const pathSrc = resolve(__dirname, 'src');
// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '@': pathSrc,
        },
    },

    css: {
        postcss: {
            plugins: [
                autoprefixer(),
                viewport({
                    appSelector: '#app', //你需要的页面
                    viewportWidth: file => (file.includes('vant') ? 375 : 750), // ui开发尺寸
                    maxDisplayWidth: 750,
                    border: false,
                    disableDesktop: true,
                    disableLandscape: true,
                    appContainingBlock: 'auto',

                    // desktopWidth: 1200,
                    // exclude: [/pc/],
                }),

                // postcssPxToViewport({
                //     unitToConvert: 'px', // 需要转换的单位
                //     viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
                //     viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
                //     unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
                //     viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
                //     fontViewportUnit: 'vw', // 字体使用的视口单位
                //     selectorBlackList: ['.ignore', '.hairlines', '.donut-'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
                //     minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
                //     mediaQuery: false, // 允许在媒体查询中转换`px`
                //     exclude: /node_modules\/vant/, // 排除 Vant 包
                //     // exclude: /(\/|\\)(node_modules)(\/|\\)/, // 排除node_modules文件中第三方css文件
                // }),
                // // vant 是按照375的尺寸
                // postcssPxToViewport({
                //     unitToConvert: 'px', // 需要转换的单位
                //     viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
                //     viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
                //     unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
                //     viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
                //     fontViewportUnit: 'vw', // 字体使用的视口单位
                //     selectorBlackList: ['.ignore', '.hairlines', '.donut-'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
                //     minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
                //     mediaQuery: false, // 允许在媒体查询中转换`px`
                //     include: /node_modules\/vant/, // 只针对 Vant 包
                // }),
                // postcssViewportUnits({
                //     filterRule: rule =>
                //         rule.selector.indexOf('::after') === -1 &&
                //         rule.selector.indexOf('::before') === -1 &&
                //         rule.selector.indexOf(':after') === -1 &&
                //         rule.selector.indexOf(':before') === -1 &&
                //         rule.nodes.findIndex(i => i.prop === 'content') === -1,
                // }),
            ],
        },
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/assets/css/variables.scss";',
            },
        },
    },
    plugins: [
        vue(),
        AutoImport({
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ['vue', '@vueuse/core', 'pinia', 'vue-router', 'vue-i18n'],
            resolvers: [
                VantResolver(),
                // 自动导入图标组件
                IconsResolver({}),
            ],
            eslintrc: {
                // 是否自动生成 eslint 规则，建议生成之后设置 false
                enabled: false,
                // 指定自动导入函数 eslint 规则的文件
                filepath: './.eslintrc-auto-import.json',
                globalsPropValue: true,
            },
            // 是否在 vue 模板中自动导入
            vueTemplate: true,
            // 指定自动导入函数TS类型声明文件路径 (false:关闭自动生成)

            dts: 'src/types/auto-imports.d.ts',
        }),
        Components({
            resolvers: [
                // 自动注册图标组件
                IconsResolver({
                    // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
                    enabledCollections: ['ep'],
                }),
                VantResolver(),
            ],
            // 指定自定义组件位置(默认:src/components)
            dirs: ['src/components', 'src/**/components'],
            // 指定自动导入组件TS类型声明文件路径 (false:关闭自动生成)
            dts: 'src/types/components.d.ts',
        }),
        Icons({
            // 自动安装图标库
            autoInstall: true,
        }),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [resolve(pathSrc, 'assets/icons')],
            // 指定symbolId格式
            symbolId: 'icon-[dir]-[name]',
        }),
        UnoCSS({
            configFile: './uno.config.ts',
        }),
    ],
});
